/*
 * © 2010 Autodata Solutions Company. All Rights Reserved
 * This source code is the confidential and proprietary information of Autodata Solutions Company.
 * The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
 * without the prior written consent of Autodata Solutions Company.
 */
Ext.ns('net.autodata.compare');
(function () {
	
	var DQ = Ext.DomQuery;
	
	/**
	 * This view class is used to control how the net.autodata.compare.VehiclePanel is rendered
	 * @class CompetitorVehicleView
	 * @extends net.autodata.compare.AbstractVehicleView
	 * @namespace net.autodata.compare
	 */
	var View = Ext.extend(net.autodata.compare.AbstractVehicleView, {
		
		/**
		 * @property changeButton
		 * @type net.autodata.compare.ChangeButton
		 */
	    changeButton: undefined,
		
		/**
		 * @property removeButton
		 * @type Ext.Button
		 */
	    removeButton: undefined,

	    vehicleInfoCfg: {
	        descriptionMaxLength: 30
	    },
		
		/**
		 * IOFImage configuration properties
		 * @property imageCfg
		 * @type Object
		 */
		imageCfg: {
			imageWidth: 138,
			imageHeight: 49
		},
		
		//override abstract controller to allow creation of this concret class
		constructor: function ()
		{	
			View.superclass.ctor.apply(this, arguments);
		},
		
		/**
		 * @method initTemplates
		 */
		initTemplates: function ()
		{
			var ts = this.templates || {};
			
			if (!ts.mainTpl) {				
				ts.mainTpl = new Ext.Template(					
					'<div class="competitor-view">',
						'<div class="vehiclepanel-header">',
							'<table border="0" cellpadding="0" cellspacing="0">',
								'<tr>',
									'<td class="change-btn-wrap"></td>',
									'<td class="remove-btn-wrap"></td>',
								'</tr>',
							'</table>',
						'</div>',
						'<div class="vehiclepanel-body">',
							'<div class="vehicle-image"></div>',
							'<div class="vehicle-info"></div>',				
						'</div>',
					'</div>',
					{
						compiled: true,
						disableFormats: true
					}
				);
			}
						
			this.templates = ts;
			
			View.superclass.initTemplates.apply(this, arguments);
		},
		
		/**
		 * @method initComponents
		 */
		initComponents: function ()
		{
			
			View.superclass.initComponents.apply(this, arguments);
			this.changeButton = new net.autodata.compare.ChangeButton({
				
				listeners: {
					'trimselect': function (acode)
					{
						this.fireEvent('change', acode);
					},
					scope: this
				}
			});
			
			this.removeButton = new net.autodata.compare.RemoveButton({
				handler: function () {
					this.fireEvent('remove');
				},				
				scope: this
			});
		},
		
		/**
		 * @method render
		 */
		render: function ()
		{
			View.superclass.render.apply(this, arguments);
			
			var body = this.component.el;
			
			this.templates.mainTpl.overwrite(body.dom, {});

			this.vehicleInfo.render(DQ.selectNode('.vehicle-info', body.dom));
			this.vehicleImage.render(DQ.selectNode('.vehicle-image', body.dom));
			this.changeButton.render(DQ.selectNode('.vehiclepanel-header td.change-btn-wrap', body.dom));
			this.removeButton.render(DQ.selectNode('.vehiclepanel-header td.remove-btn-wrap', body.dom));
		}
	});
	
	net.autodata.compare.CompetitorVehicleView = View;
})();